<template>
	<view
		@click="ctnClick"
		@longpress="copy"
		class="ctn_box"
		v-html="content"
	></view>
</template>

<script>
	/**
	 * @property {String} text 需要显示的内容
	 */
	// import MarkdownIt from 'markdown-it'
	// import mdKatex from '@traptitech/markdown-it-katex'
	// import mila from 'markdown-it-link-attributes'
	// import hljs from 'highlight.js'
	// import 'highlight.js/styles/agate.css'

	function highlightBlock(str, lang) {
		return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">chat.copyCode</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
	}
	export default {
		props: {
			text: String,
		},
		data() { return { content: "", copyTimer: null, isIos: uni.getSystemInfoSync().platform != 'android' } },
		watch: {
			text: {
				// handler(str = '') {
				// 	if (!str) return this.content = '';
				// 	str = str.replace(/<br\/>/g, '\n');
				// 	const mdi = new MarkdownIt({
				// 		linkify: true,
				// 		highlight(code, language) {
				// 			const validLang = !!(language && hljs.getLanguage(language))
				// 			if (validLang) {
				// 				const lang = language ?? ''
				// 				return highlightBlock(hljs.highlight(code, { language: lang }).value, lang)
				// 			}
				// 			return highlightBlock(hljs.highlightAuto(code).value, '')
				// 		},
				// 	});
				// 	mdi.use(mila, { attrs: { target: '_blank', rel: 'noopener' } });
				// 	mdi.use(
				// 		mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' }
				// 	);
				// 	this.content = mdi.render(str);
				// },
				immediate: true
			}
		},
		methods: {
			ctnClick() {
				// this.isIos && this.copy();
			},
			copy() {
				if (this.text) {
					clearTimeout(this.copyTimer)
					this.copyTimer = setTimeout(() => uni.setClipboardData({ data: this.text.replace(/<br\/>/g, '\n') }),
						300)
				}
			}
		}
	}
</script>

<style
	lang="scss"
	scoped
>
	.ctn_box {
		color: #BFBFBF;
		font-size: 30rpx;
		font-weight: 400;
		line-height: 42rpx;
	}
</style>
